<template>
  <div>
    <el-row v-if="examData.examDataStatus" class="my-card">
      <el-card>
        <div slot="header" class="clearfix">
          <h3>考试报名信息</h3>
        </div>
        <el-table id="pdfDom" :data="examData.examList">
          <el-table-column label="报考科目" min-width="120px" align="center">
            <template slot-scope="scope">
              <i class="el-icon-reading" />
              <span style="margin-left: 10px">{{ scope.row.examName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="考试日期" min-width="120px" align="center">
            <template slot-scope="scope">
              <i class="el-icon-date" />
              <span style="margin-left: 10px">{{ scope.row.examDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="开考状态" min-width="80px" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.examStatus === 0">未开考</el-tag>
              <el-tag v-else-if="scope.row.examStatus === 1" type="success">考试中</el-tag>
              <el-tag v-else-if="scope.row.examStatus === 2" type="info">考试结束</el-tag>
              <el-tag v-else type="danger">考试科目异常</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="报名表" fixed="right" min-width="140px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.examDownload"><el-button type="primary" icon="el-icon-download" @click="eventPdfDownload">查看并下载</el-button></span>
              <span v-else>
                <el-tooltip effect="dark" content="管理员已禁止下载此场报名表" placement="bottom">
                  <el-button type="info" icon="el-icon-download" disabled>查看并下载</el-button>
                </el-tooltip>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-row>
    <el-row v-else class="my-card">
      <el-card>
        <div slot="header" class="clearfix">
          <h3>考试报名信息</h3>
        </div>
        <el-empty description="你还没有报名任何科目">
          <el-button type="primary" icon="el-icon-position">点击跳转报名页面</el-button>
        </el-empty>
      </el-card>
    </el-row>
    <el-dialog :visible.sync="examPdfDialog" :center="true" width="80%">
      <h2 slot="title">报名表查看</h2>
      <studentBaseInfoPdf />
    </el-dialog>
  </div>
</template>

<script>

import baseStudentExamInfoPdf from '@/views/personal/components/StudentExamInfoPdf'

export default {
  name: 'StudentExamInfoCard',
  components: {
    studentBaseInfoPdf: baseStudentExamInfoPdf
  },
  data() {
    return {
      // @param:examName @desc:考试科目
      // @param:examDate @desc:考试的时间字符串
      // @param:examStatus @desc:开考状态（根据考试时间和当前时间计算出来）
      // @param:examDownload @desc:报名表信息下载
      examPdfDialog: false,
      examData: {
        examDataStatus: true,
        examList: [
          { examName: '2021年语文考试', examDate: '2020/04/28 8:00-11:30', examStatus: 0, examDownload: true },
          { examName: '2021年数学考试', examDate: '2020/04/28 8:00-11:30', examStatus: 1, examDownload: false },
          { examName: '2021年英语考试', examDate: '2020/04/28 8:00-11:30', examStatus: 0, examDownload: true },
          { examName: '2021年物理考试', examDate: '2020/04/28 8:00-11:30', examStatus: 2, examDownload: false },
          { examName: '2021年化学考试', examDate: '2020/04/28 8:00-11:30', examStatus: 1, examDownload: false }
        ]
      }
    }
  },
  methods: {
    eventPdfDownload() {
      this.$router.push('/pdfWather')
    }
  }
}
</script>

<style scoped>
.my-card {
  margin-top: 30px;
}
</style>
